@require './config'
.content
  code
    color #3683D6
    padding 0.15rem 0.5rem
    margin 0
    background-color #E4F1FF
    border-radius 4px
.content
  pre, pre[class*='language-']
    line-height 1.4
    padding 1.25rem 1.5rem
    margin 40px 0
    background-color $codeBgColor
    border-radius 4px
    overflow auto
    code
      // color #3683D6
      color #333
      padding 0
      background-color transparent
      border-radius 4px
div[class*='language-']
  position relative
  // background-color #F5F7F8
  background-color #E9F0F8
  border-radius 4px
  .highlight-lines
    user-select none
    padding-top 1.3rem
    position absolute
    top 0
    left 0
    width 100%
    line-height 1.4
    .highlighted
      background-color rgba(206, 151, 151, 66%)
  pre, pre[class*='language-']
    background transparent
    position relative
    z-index 1
  &::before
    position absolute
    z-index 3
    top 1.3em
    right 2em
    font-size 0.75rem
    font-weight 600
    color rgba(219,73,132, 0.8)
  &:not(.line-numbers-mode)
    .line-numbers-wrapper
      display none
  &.line-numbers-mode
    .highlight-lines .highlighted
      position relative
      &:before
        content ' '
        position absolute
        z-index 3
        left 0
        top 0
        display block
        width $lineNumbersWrapperWidth
        height 100%
        background-color rgba(0, 0, 0, 66%)
    pre
      padding-left ($lineNumbersWrapperWidth + 1) rem
      vertical-align middle
    .line-numbers-wrapper
      position absolute
      top 0
      width $lineNumbersWrapperWidth
      text-align center
      color rgba(255, 255, 255, 0.3)
      padding 1.25rem 0
      line-height 1.4
      br
        user-select none
      .line-number
        position relative
        z-index 4
        user-select none
        font-size 0.85em
    &::after
      content ''
      position absolute
      z-index 2
      top 0
      left 0
      width $lineNumbersWrapperWidth
      height 100%
      border-radius 6px 0 0 6px
      border-right 1px solid rgba(0, 0, 0, 66%)
      background-color $codeBgColor
for lang in $codeLang
  div{'[class~="language-' + lang + '"]'}
    &:before
      content '' + lang
div[class~='language-javascript']
  &:before
    content 'js'
div[class~='language-typescript']
  &:before
    content 'ts'
div[class~='language-markup']
  &:before
    content 'html'
div[class~='language-markdown']
  &:before
    content 'md'
div[class~='language-json']:before
  content 'json'
div[class~='language-ruby']:before
  content 'rb'
div[class~='language-python']:before
  content 'py'
div[class~='language-bash']:before
  content 'sh'
div[class~='language-wxss']:before
  content 'wxss'
div[class~='language-wxml']:before
  content 'wxml'